import React, {Component} from 'react'
import {observer, inject} from 'mobx-react';
import {withRouter} from 'react-router-dom';
import {toJS} from 'mobx';

import {RouteLayout, Form,} from 'weaver-mobile-page';
import {List, Tools, Toast, Picker, Icon} from "weaver-mobile";
import '../../../style/signlog/append.less';
import SignInput from '../public/SignInput';
import * as mobx from "mobx";


const ButtonGroup = RouteLayout.ButtonGroup;
const getLabel = Tools.getLabel;

@withRouter
@inject("odocComsStore", "appendSignLogStore")
@observer
export default class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.visible != nextProps.visible && nextProps.visible) {
            this.loadData();
        }
    }

    componentWillMount() {
        this.loadData();
    }

    loadData = () => {
        const {appendSignLogStore, odocComsStore = {}, location} = this.props;
        const {doInit} = appendSignLogStore;
        let {requestParam = {}} = odocComsStore;
        requestParam = mobx.toJS(requestParam);
        delete requestParam.markInfo;

        const prepath = location.pathname;

        doInit(prepath, requestParam, this.onCancel);
    }

    render() {
        return (
            <div className={"appendContent"}>
                <div style={{height: "100%", overflow: "auto"}}>
                    {this.getFormContent()}
                    {this.getSignInputContent()}
                </div>
                <ButtonGroup
                    data={this.getButtons()}
                    flexStyles={this.getFlextStyles()}
                />
            </div>
        )
    }

    /**
     * 获取签字意见组件
     * */
    getSignInputContent = () => {
        const {appendSignLogStore, odocComsStore} = this.props;
        const {sumitParams, changeSubmitParams, appendPickerRemark} = appendSignLogStore;
        const {workflowStores = {}} = odocComsStore;
        const {remark = ""} = sumitParams;

        let signparams = {
            workflowStores,
            remark,
            changeRemark: changeSubmitParams,
            appendRemark: appendPickerRemark,
        };

        return <div className={"appendSign"}>
            <SignInput {...signparams}/>
        </div>;
    }

    /**
     * 表单组件
     * @returns {*}
     */
    getFormContent = () => {
        const {appendSignLogStore} = this.props;
        const {form} = appendSignLogStore;
        const {isInit = false} = form;
        let formContent = <div></div>;
        if (isInit) {
            formContent = <Form store={form} onChange={this.onChange} className={"appendForm"}/>
        }
        return formContent;
    }


    onChange = (condition, value) => {
        const {domkey = []} = condition;
        const {appendSignLogStore} = this.props;
        const {controlOptions = false} = appendSignLogStore;

        if (controlOptions && domkey.indexOf("appendToUseId") != -1) {
            value = toJS(value);
            const {getSqlWhere} = appendSignLogStore;
            let vals = [];
            value.map(item => {
                vals.push(item.id)
            });
            getSqlWhere({appendToUseId: vals.join(",")});
        }
    }

    /**
     * 取消
     */
    onCancel = (res = {}) => {
        const {api_status = false} = res;
        const {appendSignLogStore, odocComsStore = {}} = this.props;
        const {destory} = appendSignLogStore;
        typeof destory == "function" && destory();
        if (api_status) {
            const {submitCallBack} = odocComsStore;
            typeof submitCallBack == "function" && submitCallBack()
        }

        window && window.historyRoute && window.historyRoute.go && (window.historyRoute.go(-1));
    }

    /**
     * 提交
     */
    onSubmit = () => {
        const {appendSignLogStore, pluginbuttons = [], odocComsStore = {}} = this.props;
        const {workflowStores = {}} = odocComsStore;
        const {doSave} = appendSignLogStore;
        doSave(workflowStores, this.onCancel)
    }

    /**
     * 底部按钮
     * @returns {Array}
     */
    getButtons = () => {
        const {appendSignLogStore} = this.props;
        const {loading = false} = appendSignLogStore;
        let buttons = [];
        /*buttons.push({
            key: 'close',
            text: getLabel(31129, "取消"),
            onClick: this.onCancel,
        });*/
        buttons.push({
            key: 'submit',
            text: getLabel(520456, "代录意见"),
            onClick: this.onSubmit,
            type: 'primary',
            disabled: !loading,
        });
        return buttons;
    }

    /**
     * 显示按钮样式
     * @returns {{style: {flex: number}}[]}
     */
    getFlextStyles = () => {
        const flextStyles = [
            {
                style: {flex: 1}
            }, {
                style: {flex: 1}
            }
        ];
        return flextStyles;
    }
}